<template>
  <view class="container">
    <view class="pre-img-box">
      <view class="swiper-box">
        <swiper :autoplay="true"
                :interval="2000">
          <swiper-item v-for="(bImage,index) in info.bannerImage"
                       :key="index">
            <image :src="staticUrl+bImage"
                   class="swiper-item"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="camera-bg"></view>
      <view class="camera-img-box">
        <view class="camera-box">
          <image src="../../static/images/camera.png"></image>
        </view>
        <view class="camera-num">{{info.bannerImage!== undefined && info.bannerImage!== null && info.bannerImage.length>0 
? info.bannerImage.length : ''}}</view>
      </view>
    </view>
    <view class="company-box">
      <view class="company-name-label">
        <view class="company-name">{{info.name}}</view>
        <view class="company-label-box">
          <view class="company-label"
                v-for="(label,index) in item.labels"
                :key="index">{{label}}</view>
        </view>
      </view>
      <view class="company-contact">
        <view class="contact-phone"
              @tap="callPhone"
              v-model="info.tel">
          <image src="../../static/images/contact.png"></image>
        </view>
      </view>
    </view>
    <view class="content-box"
          v-html="info.job"></view>
    <view class="content-box"
          v-html="info.salary"></view>

    <view class="submit-box"
          v-if="id == 0">
      <view class="submit-btn"
            @tap="showPay">预定金</view>
    </view>
    <view class="bg-box"
          v-show="isShowPay"></view>
    <view class="pop-box"
          v-show="isShowPay">
      <view class="pay-content-box">
        <view class="pay-cancel-box"
              @tap="hidePay">
          <image src="../../static/images/cancel.png"></image>
        </view>
        <view class="pay-title-box">预定金100元包括保险费、被褥费</view>
        <view class="pay-btn-box">
          <view class="pay-btn"
                @tap="goMyInternship">确认支付</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import jyfParser from '../../components/jyf-parser/jyf-parser.vue'
import { myRequest, http, staticUrl } from '../../utils'

export default {
  comments: {
    jyfParser
  },
  data () {
    return {
      id: 0,
      bannerImage: [],
      isShowPay: false,
      staticUrl: staticUrl,
      tel: "",
      info: {}
    }
  },

  onLoad (options) {
    if (options.id) {
      this.fetchData(options.id)
    }
  },
  methods: {
    fetchData (id) {
      const that = this
      http('/internship/detail',
        {
          id: id
        }, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          that.info = res.data.data
          that.tel = that.info.tel
        }).catch(
          err => {
            console.error(err)
          })
    },
    showPay () {
      this.isShowPay = true
    },

    hidePay () {
      this.isShowPay = false
    },

    goMyInternship () {
      this.hidePay()
      uni.navigateTo({
        url: '/pages/my_internship/my_internship'
      })
    },

    callPhone () {
      uni.makePhoneCall({
        phoneNumber: this.tel
      })
    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}

.pre-img-box {
  width: 750rpx;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swiper-box {
  width: 750rpx;
  overflow: hidden;
}

.swiper-box image {
  width: 100%;
}

.camera-bg {
  width: 120rpx;
  height: 60rpx;
  border-radius: 30rpx;
  position: absolute;
  background-color: #000000;
  opacity: 0.4;
  top: 220rpx;
}

.camera-img-box {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 220rpx;
}

.camera-box {
  margin-right: 20rpx;
  height: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.camera-box image {
  width: 50rpx;
  height: 50rpx;
}

.camera-num {
  font-size: 32rpx;
  color: #ffffff;
}

.company-box {
  background-color: #ffffff;
  width: 750rpx;
  height: 176rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.company-name-label {
  padding-left: 26rpx;
}

.company-name {
  font-size: 36rpx;
  color: #333333;
  margin-bottom: 16rpx;
}

.company-label {
  color: #f0430d;
  font-size: 20rpx;
  border-radius: 10rpx;
  border: solid 1rpx #f0430d;
  padding-left: 14rpx;
  padding-right: 14rpx;
  padding-top: 6rpx;
  padding-bottom: 7rpx;
  margin-right: 20rpx;
}

.company-label-box {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}

.company-contact {
  padding-right: 40rpx;
}

.contact-phone image {
  width: 100rpx;
  height: 100rpx;
}

.content-box {
  background-color: #ffffff;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  margin-top: 20rpx;
}

.submit-box {
  width: 750rpx;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}

.submit-btn {
  width: 678rpx;
  height: 64rpx;
  background-color: #5683ec;
  border-radius: 32rpx;
  font-size: 30rpx;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bg-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 100%;
  background-color: #000000;
  opacity: 0.5;
}

.pop-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay-content-box {
  width: 620rpx;
  height: auto;
  background-color: #ffffff;
  border-radius: 30rpx;
  font-size: 30rpx;
  padding-top: 24rpx;
  padding-right: 24rpx;
}

.pay-cancel-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.pay-cancel-box image {
  width: 40rpx;
  height: 40rpx;
}

.pay-title-box {
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #666666;
}

.pay-btn-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 42rpx;
}

.pay-btn {
  width: 550rpx;
  height: 72rpx;
  background-color: #5683ec;
  color: #ffffff;
  border-radius: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
